<template>
  <div class="order">
    <div class="title">我的订单</div>
    <div class="orderlist">
      <div class="orderitem" v-for="item in list" :key="item.shopId">
        <div class="orderitem__title">
          {{ item.shopName }}
          <span class="orderitem__status">{{item.isCanceled?'已取消':'已下单'}}</span>
        </div>
        <div class="orderitem__content">
          <div class="orderitem__content__imgs">
            <img src="it.product.img" alt="" class="orderitem__content__img" v-for="(it, index) in item.product" :key="index">
          </div>
          <div class="orderitem__info">
            <div class="orderitem__info__price">&yen;12</div>
            <div class="orderitem__info__count">共2件</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { toRefs, reactive } from 'vue'
import { getOrderInfo } from '../../api/detail'
// import { useGoodsCountEffect } from '../../commonEffect/cartEffect'
// 处理订单列表逻辑
const useOrderListEffect = () => {
  // const { } = useGoodsCountEffect()
  const data = reactive({ list: [] })
  const handleOrderList = async () => {
    const res = await getOrderInfo()
    console.log(res)
    if (res.errno !== 0) return
    data.list = res.data
  }
  const { list } = toRefs(data)
  handleOrderList()
  return { list }
}
export default {
  name: 'Order',
  setup () {
    const { list } = useOrderListEffect()
    return { list }
  }
}
</script>

<style lang="scss" scoped>
.order {
  overflow-y: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: .5rem;
  background: #f9f5f5;
  .title {
    line-height: .44rem;
    font-size: .16rem;
    color: #333;
    text-align: center;
    background-color: #fff;
  }
  .orderlist {
    .orderitem {
      margin: .16rem .18rem;
      padding: .16rem;
      background-color: #fff;
      &__title {
        margin-bottom: .16rem;
        line-height: .22rem;
        font-size: .16rem;
        color: #333;
      }
      &__status {
        float: right;
        font-size: .14rem;
        color: #999;
      }
      &__content {
        display: flex;
        &__imgs {
          flex: 1;
        }
        &__img {
          width: .4rem;
          height: .4rem;
          margin-right: .12rem;
        }
      }
      &__info {
        width: .7rem;
        &__price {
          margin-bottom: .04rem;
          line-height: .2rem;
          font-size: .14rem;
          color: rgb(246, 141, 141);
          text-align: right;
        }
        &__count {
          font-size: .12rem;
          color: #333;
          text-align: right;
          line-height: .14rem;
        }
      }
    }
  }
}
</style>
